﻿<UserControl x:Class="Carousel.CarouselControl"
 	        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	        xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" 
            xmlns:PathListBoxUtils="clr-namespace:Expression.Samples.PathListBoxUtils;assembly=Expression.Samples.PathListBoxUtils" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
            xmlns:local="clr-namespace:Carousel"
            mc:Ignorable="d"
            d:DesignHeight="300" d:DesignWidth="300">


	<UserControl.Resources>

		<!-- Defualt Previous Button style-->
		<Style x:Key="navigatorPreviousButtonStyle" TargetType="{x:Type Button}">
			<Setter Property="Padding" Value="0"/>
			<Setter Property="Margin" Value="5"/>
			<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Viewbox  Width="40"
                              Height="40">
							<Image x:Name="img" Source="Images/previous.png"
                               Margin="{TemplateBinding Padding}" Opacity="0.5"
                               Stretch="Uniform">
							</Image>
						</Viewbox>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver"
                                 Value="True">
								<Setter Property="Effect">
									<Setter.Value>
										<DropShadowEffect Color="Red"
                                                      ShadowDepth="2"
                                                      Direction="315"
                                                      Opacity="0.5" />
									</Setter.Value>
								</Setter>
								<Setter TargetName="img"
                                    Property="Opacity"
                                    Value="1.0" />
							</Trigger>
							<Trigger Property="IsEnabled"
                                 Value="False">
								<Setter TargetName="img"
                                    Property="Opacity"
                                    Value="0.3" />
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>


		<!-- Defualt Next Button style-->
		<Style x:Key="navigatorNextButtonStyle" TargetType="{x:Type Button}">
			<Setter Property="Padding" Value="0"/>
			<Setter Property="Margin" Value="5"/>
			<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Viewbox  Width="40"
                              Height="40">
							<Image x:Name="img" Source="Images/next.png"
                               Margin="{TemplateBinding Padding}" Opacity="0.5"
                               Stretch="Uniform">
							</Image>
						</Viewbox>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver"
                                 Value="True">
								<Setter Property="Effect">
									<Setter.Value>
										<DropShadowEffect Color="Red"
                                                      ShadowDepth="2"
                                                      Direction="315"
                                                      Opacity="0.5" />
									</Setter.Value>
								</Setter>
								<Setter TargetName="img"
                                    Property="Opacity"
                                    Value="1.0" />
							</Trigger>
							<Trigger Property="IsEnabled"
                                 Value="False">
								<Setter TargetName="img"
                                    Property="Opacity"
                                    Value="0.3" />
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<!-- PathlistBox Paath Converter-->
		<PathListBoxUtils:AdjustedOffsetToRadiusConverter x:Key="AdjustedOffsetToRadiusConverter"/>

		<!-- PathListBox Style-->
		<Style x:Key="PathListBoxItemStyle" TargetType="{x:Type ec:PathListBoxItem}">
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ec:PathListBoxItem}">
						<Grid Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<TransformGroup>
									<ScaleTransform>
										<ScaleTransform.ScaleY>
											<Binding Path="IsArranged" 
                                                     RelativeSource="{RelativeSource TemplatedParent}">
												<Binding.Converter>
													<ec:IsArrangedToScaleConverter/>
												</Binding.Converter>
											</Binding>
										</ScaleTransform.ScaleY>
										<ScaleTransform.ScaleX>
											<Binding Path="IsArranged" 
                                                     RelativeSource="{RelativeSource TemplatedParent}">
												<Binding.Converter>
													<ec:IsArrangedToScaleConverter/>
												</Binding.Converter>
											</Binding>
										</ScaleTransform.ScaleX>
									</ScaleTransform>
									<SkewTransform/>
									<RotateTransform Angle="{Binding OrientationAngle, 
                                        RelativeSource={RelativeSource TemplatedParent}}"/>
									<TranslateTransform/>
								</TransformGroup>
							</Grid.RenderTransform>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused"/>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<PathListBoxUtils:PathListBoxItemTransformer x:Name="pathListBoxItemTransformer"
                                    Loaded="PathListBoxItemTransformer_Loaded"                                     
                                    VerticalAlignment="Top" d:LayoutOverrides="Width" IsCentered="True">
								<PathListBoxUtils:PathListBoxItemTransformer.Ease>
									<SineEase EasingMode="EaseIn"/>
								</PathListBoxUtils:PathListBoxItemTransformer.Ease>
								<Grid x:Name="TransformerParentGrid" Height="Auto">
									<Rectangle x:Name="FocusVisualElement" RadiusY="1" 
                                               RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
                                               Visibility="Collapsed"/>
									<ContentPresenter x:Name="contentPresenter" 
                                                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                      Content="{TemplateBinding Content}" 
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
									</ContentPresenter>
									<Rectangle x:Name="fillColor" Fill="#FFBADDE9" 
                                               IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
									<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" 
                                               IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
								</Grid>
							</PathListBoxUtils:PathListBoxItemTransformer>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>


	</UserControl.Resources>



	<Grid Margin="20">
		<ec:PathListBox x:Name="pathListBox" Margin="0" WrapItems="True"
                    SelectionMode="Single"
                    ItemContainerStyle="{DynamicResource PathListBoxItemStyle}">
			<ec:PathListBox.LayoutPaths>
				<ec:LayoutPath SourceElement="{Binding ElementName=ell}" 
                               Distribution="Even" Capacity="7" Start="0.01" 
                               FillBehavior="NoOverlap"/>
			</ec:PathListBox.LayoutPaths>
			<i:Interaction.Behaviors>
				<PathListBoxUtils:PathListBoxScrollBehavior 
                        DesiredOffset="0.5" 
                        HideEnteringItem="False">
					<PathListBoxUtils:PathListBoxScrollBehavior.Ease>
						<SineEase EasingMode="EaseOut" />
					</PathListBoxUtils:PathListBoxScrollBehavior.Ease>
					<i:Interaction.Triggers>
						<i:EventTrigger SourceName="pathListBox" 
                                        SourceObject="{Binding ElementName=previousButton}" 
                                        EventName="Click">
							<i:InvokeCommandAction CommandName="DecrementCommand"/>
						</i:EventTrigger>
						<i:EventTrigger SourceName="pathListBox" 
                                        SourceObject="{Binding ElementName=nextButton}" 
                                        EventName="Click">
							<i:InvokeCommandAction CommandName="IncrementCommand"/>
						</i:EventTrigger>
						<i:EventTrigger SourceName="pathListBox" 
                                        EventName="SelectionChanged">
							<i:InvokeCommandAction CommandName="ScrollSelectedCommand"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</PathListBoxUtils:PathListBoxScrollBehavior>
			</i:Interaction.Behaviors>
		</ec:PathListBox>

		<StackPanel x:Name="spButtons" Orientation="Horizontal" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Bottom" Margin="5">
			<Button x:Name="previousButton" Content="&lt;" 
                    Style="{StaticResource navigatorPreviousButtonStyle}" 
                    Click="PreviousButton_Click"/>
			<Button x:Name="nextButton" Content="&gt;" 
                    Style="{StaticResource navigatorNextButtonStyle}" 
                    Click="NextButton_Click"/>
		</StackPanel>

		<Grid x:Name="gridForKnownPaths" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
			<Path x:Name="wavePath" Data="M-45,335 C59,230 149,187 149,187 L250,168 320,191 C320,191 402,254 403,257 404,260 453,306 453,306 L521,328 593,334 654,288" Margin="-46,127,-31,106" Stretch="Fill" Stroke="Transparent" StrokeThickness="1"/>
			<Path x:Name="diagonalPath" Data="M-43,120 L249,245 432,340 528,407 609,472" Margin="-44,79,14,-31" Stretch="Fill" Stroke="Transparent" StrokeThickness="1"/>
			<Path x:Name="zigzagPath" Data="M-38,425 C74,254 -20.5,336.5 96.5,208.5 213.5,80.5 256.5,72.5 256.5,72.5 L343.5,91.5 389.5,355.5 444.5,365.5 508.5,267.5 547.5,214.5 649.5,110.5" Margin="-38,32.5,-26.5,16" Stretch="Fill" Stroke="Transparent"  StrokeThickness="1"/>
			<Ellipse x:Name="ellipsePath" Margin="40,32.5,82.5,106" Stroke="Transparent" StrokeThickness="1"/>
		</Grid>

	</Grid>


</UserControl>
